
<style>
  html {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  body {
    margin: 30px auto;
    max-width: 800px;
  }
  pre {
    padding: 16px;
  }
  span > code {
    background: black;
    padding: 4px;
  }
  [data-highlighted-line], [data-highlighted-chars] {
    background-color: rgba(255, 255, 255, 0.25);
  }
  code[data-line-numbers] {
    counter-reset: line;
  }
  code[data-line-numbers]>[data-line]::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 1rem;
    margin-right: 2rem;
    text-align: right;
    color: gray;
  }

  [data-rehype-pretty-code-figure] code[data-theme*=' '],
  [data-rehype-pretty-code-figure] code[data-theme*=' '] span {
    color: var(--shiki-light) !important;
    background-color: var(--shiki-light-bg) !important;
  }

  @media (prefers-color-scheme: dark) {
    [data-rehype-pretty-code-figure] code[data-theme*=' '],
    [data-rehype-pretty-code-figure] code[data-theme*=' '] span {
      color: var(--shiki-dark) !important;
      background-color: var(--shiki-dark-bg) !important;
    }
  }

  .diff.add {
    background-color: rgba(0, 255, 100, 0.25);
  }
  .diff.remove {
    background-color: rgba(255, 100, 200, 0.35);
  }
</style>
<h2>Highlighted partial node</h2>
<p>/carrot/</p>
<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #24292e; color: #e1e4e8"
    tabindex="0"
    data-language="js"
    data-theme="github-dark"
  ><code data-language="js" data-theme="github-dark" style="display: grid;"><span data-line=""><span style="color:#F97583">function</span><span style="color:#B392F0"> </span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">carrot</span></mark><span style="color:#E1E4E8">() {</span></span>
<span data-line=""><span style="color:#6A737D">  // comment that contains </span><mark data-highlighted-chars="" class="word"><span style="color:#6A737D">carrot</span></mark><span style="color:#6A737D"> and other words.</span></span>
<span data-line=""><span style="color:#E1E4E8">}</span></span></code></pre>
</figure>
<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #24292e; color: #e1e4e8"
    tabindex="0"
    data-language="js"
    data-theme="github-dark"
  ><code data-language="js" data-theme="github-dark" style="display: grid;"><span data-line=""><span style="color:#F97583">function</span><span style="color:#B392F0"> </span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">carrot</span></mark><span style="color:#E1E4E8">() {</span></span>
<span data-line=""><span style="color:#6A737D">  //</span><mark data-highlighted-chars="" class="word"><span style="color:#6A737D">carrot</span></mark><span style="color:#6A737D"> </span><mark data-highlighted-chars="" class="word"><span style="color:#6A737D">carrot</span></mark><span style="color:#6A737D"> contains </span><mark data-highlighted-chars="" class="word"><span style="color:#6A737D">carrot</span></mark><span style="color:#6A737D"> and other words, </span><mark data-highlighted-chars="" class="word"><span style="color:#6A737D">carrot</span></mark></span>
<span data-line=""><span style="color:#E1E4E8">}</span></span></code></pre>
</figure>
<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #24292e; color: #e1e4e8"
    tabindex="0"
    data-language="js"
    data-theme="github-dark"
  ><code data-language="js" data-theme="github-dark" style="display: grid;"><span data-line=""><span style="color:#F97583">function</span><span style="color:#B392F0"> </span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">carrot</span></mark><span style="color:#E1E4E8">() {</span></span>
<span data-line=""><span style="color:#6A737D">  // </span><mark data-highlighted-chars="" class="word"><span style="color:#6A737D">carrot</span></mark></span>
<span data-line=""><span style="color:#E1E4E8">}</span></span></code></pre>
</figure>
<figure data-rehype-pretty-code-figure="">
  <pre
    style="background-color: #24292e; color: #e1e4e8"
    tabindex="0"
    data-language="js"
    data-theme="github-dark"
  ><code data-language="js" data-theme="github-dark" style="display: grid;"><span data-line=""><span style="color:#F97583">function</span><span style="color:#B392F0"> </span><mark data-highlighted-chars="" class="word"><span style="color:#B392F0">carrot</span></mark><span style="color:#E1E4E8">() {</span></span>
<span data-line=""><span style="color:#9ECBFF">  '</span><mark data-highlighted-chars="" class="word"><span style="color:#9ECBFF">carrot</span></mark><span style="color:#9ECBFF">'</span><span style="color:#E1E4E8">;</span></span>
<span data-line=""><span style="color:#E1E4E8">}</span></span></code></pre>
</figure>
